<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title></title>
		<script src="http://g.tbcdn.cn/mtb/lib-flexible/0.3.2/??flexible_css.js,flexible.js"></script>
		<link rel="stylesheet" type="text/css" href="css/reg.css"/>
		<link rel="stylesheet" type="text/css" href="css/public.css"/>
	</head>
	<body>
		<header>
			<div>
				<img id="fh" class="header_img2" src="logimg/left.png" >
			</div>
			<div>
				<img class="header_img1" src="logimg/icon.png" >
				需要帮助
			</div>
		</header>
	
		<form id="reg" action="" method="">
			<div style="width: 100%;">
				<a id="a">注册小米账号</a>
			</div>
			<span id="b">系统会根据您选择的国家/地区的法律法规存储您的个人信息</span>
			<div class="wbk" :class="{wbkl:y,wbkr:y2}">
				<input type="text" v-model="yhm" @focus="bs()" @input="bx()" @blur="yz()" placeholder="请输入账号"/>
			</div>
			<p class="msg">{{ msg }}</p>
			<div class="wbk" :class="{wbkl:r,wbkr:r2}">
				<input type="password" v-model="mm" @focus="bs2()"  @input="bx2()" @blur="yz2()" placeholder="请输入密码"/>
			</div>
			<p class="msg">{{ msg2 }}</p>
			<div class="wbk" :class="{wbkl:q,wbkr:q2}">
				<input type="password" v-model="qrmm" @focus="bs3()"  @input="bx3()" @blur="yz3()" placeholder="请输入确认密码"/>
			</div>
			<p class="msg">{{ msg3 }}</p>
			<div class="wbk" :class="{wbkl:e,wbkr:e2}">
				<input type="text" v-model="email" @focus="bs4()"  @input="bx4()" @blur="yz4()" placeholder="请输入邮箱"/>
			</div>
			<p class="msg">{{ msg4 }}</p>
			<div class="wbk" :class="{wbkl:z,wbkr:z2}">
				<input type="password" v-model="yzm" @focus="bs5()"  @input="bx5()" @blur="yz5()" placeholder="请输入邮箱验证码"/>
				<span @click="hqyzm()" class="hqyzm" :class="{hqyzm2:s}">获取验证码<span v-show="s">{{ time }}s</span></span>
			</div>
			<p class="msg">{{ msg5 }}</p>
			<p class="msg">{{ msgcw }}</p>
			<div class="yqtk">
				<div class="yq" @click="yq()" :class="{yq2:yqzt}">
					
				</div>
				<span>已阅读并同意小米帐号&nbsp;<a>用户协议</a>&nbsp;和&nbsp;<a>隐私政策</a></span>
			</div>
			<div @click="Reg()" class="dlbt" :class="{dlbt2:dlbtzt}">
				立即注册
			</div>
			<div class="dbwz2">
				<a>收不到验证码？</a>
			</div>
		</form>
		<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
		<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
		<script type="text/javascript">
		let app=new Vue({
		    el:"#reg",
		    data:{
		        yhm:"",//用户名
		        mm:"",//密码
				qrmm:"",//确认密码
				email:"",//邮箱账号
				yzm:"",//邮箱验证码
		        msg:"",
		        msg2:"",
				msg3:"",
				msg4:"",
				msg5:"",
				y:false,
				y2:false,
				r:false,
				r2:false,
				q:false,
				q2:false,
				e:false,
				e2:false,
				z:false,
				z2:false,
				yqzt:false,
				dlbtzt:false,
				s:false,
				time:60,
				msgcw:""
		    },
		    methods:{
				hqyzm(){
					if(this.email==""){
					    this.msg4="请输入邮箱"
						this.e2=true
						this.e=false
						this.dlbtzt=false
					}else{
						if(/^([A-z0-9]{4,18})(\w|\-)+@[A-z0-9]+\.([A-z]{2,3})$/.test(this.email)!=true){
							this.msg4="请输入正确的邮箱"
							this.e2=true
							this.dlbtzt=false
						}else if(this.msg4=="邮箱已存在"){
							this.msg4="邮箱已存在"
							this.e2=true
							this.dlbtzt=false
						}else{
							this.msg4=""
							this.e2=false
							this.e=false
							this.s=true
							if(this.time==60&&/^([A-z0-9]{4,18})(\w|\-)+@[A-z0-9]+\.([A-z]{2,3})$/.test(this.email)==true&&this.msg4!="邮箱已存在"){
								axios
									.post('http://localhost:3000/users/Regyzm',{Email:this.email})
									.then(res=>{
										if(res.data.msg=="邮箱不存在"){
											this.msg4="邮箱不存在";
											this.e2=true;
											clearInterval(id);
											this.s=false
											this.time=60
											this.dlbtzt=false
										}
									})
								var time=this.time
								var s=this.s
								var id=setInterval(()=>{
									this.time--
									if(this.time==0){
										clearInterval(id);
										this.s=false
										this.time=60
									}
								},1000);
							}
							
						}
					}
					
				},
		        yz(){
		            if(this.yhm==""){
		                this.msg="请输入账号"
						this.y2=true
						this.y=false
						this.dlbtzt=false
		            }else{
		                this.msg=""
						this.y=false
						this.list="";
						axios
								.post('http://localhost:3000/users/RegUser',{userName:this.yhm})
								.then(res=>{
									if(res.data.msg=="用户已存在"){
										this.msg="用户名已存在"
										this.y2=true
										this.y=false
										this.dlbtzt=false
									}else{
										this.msg=""
										this.y2=false
										this.y=false
									}
								})
						if(this.email!=""&&this.mm!=""&&this.msg4!="邮箱已存在"&&this.qrmm==this.mm&&this.yzm!=""&&this.msg!="用户名已存在"&&this.yqzt==true){
							this.dlbtzt=true
						}else{
							this.dlbtzt=false
						}
		            }
		        },
				yz2(){
					if(this.mm==""){
					    this.msg2="请输入登录密码"
						this.r2=true
						this.r=false
						this.dlbtzt=false
					}else{
					    this.msg2=""
						this.r=false
						if(this.qrmm!=""){
							if(this.mm!=this.qrmm){
								this.msg3="两次密码不一致"
								this.q2=true
								this.q=false
								this.dlbtzt=false
							}else{
								this.msg3=""
								this.q=false
								this.q2=false
								if(this.yhm!=""&&this.email!=""&&this.msg4!="邮箱已存在"&&this.msg!="用户名已存在"&&this.yzm!=""&&this.yqzt==true){
									this.dlbtzt=true
								}else{
									this.dlbtzt=false
								}
							}
						}
					}
				},
				yz3(){
					if(this.qrmm==""){
					    this.msg3="请输入确认密码"
						this.q2=true
						this.q=false
						this.dlbtzt=false
					}else{
						if(this.mm!=this.qrmm){
							this.msg3="两次密码不一致"
							this.dlbtzt=false
						}else{
							this.msg3=""
							this.q=false
							if(this.yhm!=""&&this.mm!=""&&this.msg4!="邮箱已存在"&&this.msg!="用户名已存在"&&this.email!=""&&this.yzm!=""&&this.yqzt==true){
								this.dlbtzt=true
							}else{
								this.dlbtzt=false
							}
						}
					}
				},
				yz4(){
					if(this.email==""){
					    this.msg4="请输入邮箱"
						this.e2=true
						this.e=false
						this.dlbtzt=false
					}else{
						if(/^([A-z0-9]{4,18})(\w|\-)+@[A-z0-9]+\.([A-z]{2,3})$/.test(this.email)!=true){
							this.msg4="请输入正确的邮箱"
							this.e2=true
							this.dlbtzt=false
						}else{
							this.msg4=""
							this.e2=false
							this.e=false
							axios
									.post('http://localhost:3000/users/RegEmail',{Email:this.email})
									.then(res=>{
										console.log(res);
										if(res.data.msg=="邮箱已存在"){
											this.msg4="邮箱已存在"
											this.e2=true
											this.e=false
											this.dlbtzt=false
										}else{
											this.msg4=""
											this.e2=false
											this.e=false
										}
									})
							if(this.yhm!=""&&this.mm!=""&&this.msg4!="邮箱已存在"&&this.msg!="用户名已存在"&&this.qrmm==this.mm&&this.yzm!=""&&this.yqzt==true){
								this.dlbtzt=true
							}else{
								this.dlbtzt=false
							}
						}
					}
				},
				yz5(){
					if(this.yzm==""){
					    this.msg5="请输入邮箱验证码"
						this.z2=true
						this.z=false
						this.dlbtzt=false
					}else{
						this.z=false
						this.z2=false
						this.msgcw=""
						this.msg5=""
						if(this.yhm!=""&&this.mm!=""&&this.msg4!="邮箱已存在"&&this.msg!="用户名已存在"&&this.qrmm==this.mm&&this.email!=""&&this.yqzt==true){
							this.dlbtzt=true
						}else{
							this.dlbtzt=false
						}
					}
				},
				bs(){
					this.y=true
				},
				bx(){
					if(this.yhm==""){
					    this.msg="请输入账号"
						this.y2=true
						this.y=false
						this.dlbtzt=false
					}else{
						this.y=true
						this.y2=false
						this.msg=""
						axios
								.post('http://localhost:3000/users/RegUser',{userName:this.yhm})
								.then(res=>{
									if(res.data.msg=="用户已存在"){
										this.msg="用户名已存在"
										this.y2=true
										this.y=false
										this.dlbtzt=false
									}else{
										this.msg=""
										this.y2=false
										this.y=true
									}
								})
						if(this.email!=""&&this.mm!=""&&this.msg4!="邮箱已存在"&&this.msg!="用户名已存在"&&this.qrmm==this.mm&&this.yzm!=""&&this.yqzt==true){
							this.dlbtzt=true
						}else{
							this.dlbtzt=false
						}
					}
				},
				bs2(){
					this.r=true
				},
				bx2(){
					if(this.mm==""){
					    this.msg2="请输入登录密码"
						this.r2=true
						this.r=false
						this.dlbtzt=false
					}else{
						this.r=true
						this.r2=false
						this.msg2=""
						if(this.qrmm!=""){
							if(this.mm!=this.qrmm){
								this.msg3="两次密码不一致"
								this.q2=true
								this.q=false
								this.dlbtzt=false
							}else{
								this.msg3=""
								this.q=false
								this.q2=false
								if(this.yhm!=""&&this.email!=""&&this.msg4!="邮箱已存在"&&this.msg!="用户名已存在"&&this.yzm!=""&&this.yqzt==true){
									this.dlbtzt=true
								}else{
									this.dlbtzt=false
								}
							}
						}
					}
				},
				bs3(){
					this.q=true
				},
				bx3(){
					if(this.qrmm==""){
					    this.msg3="请输入确认密码"
						this.q2=true
						this.q=false
						this.dlbtzt=false
					}else{
						if(this.mm!=this.qrmm){
							this.msg3="两次密码不一致"
							this.q2=true
							this.q=false
							this.dlbtzt=false
						}else{
							this.msg3=""
							this.q=true
							this.q2=false
							if(this.yhm!=""&&this.mm!=""&&this.msg4!="邮箱已存在"&&this.msg!="用户名已存在"&&this.email!=""&&this.yzm!=""&&this.yqzt==true){
								this.dlbtzt=true
							}else{
								this.dlbtzt=false
							}
						}
					}
				},
				bs4(){
					this.e=true
				},
				bx4(){
					if(this.email==""){
					    this.msg4="请输入邮箱"
						this.e2=true
						this.e=false
						this.dlbtzt=false
					}else{
						if(/^([A-z0-9]{4,18})(\w|\-)+@[A-z0-9]+\.([A-z]{2,3})$/.test(this.email)!=true){
							this.msg4="请输入正确的邮箱"
							this.e2=true
							this.dlbtzt=false
						}else{
							this.msg4=""
							this.e=false
							this.e2=false
							axios
									.post('http://localhost:3000/users/RegEmail',{Email:this.email})
									.then(res=>{

										if(res.data.msg=="邮箱已存在"){
											this.msg4="邮箱已存在"
											this.e2=true
											this.e=false
											this.dlbtzt=false
										}else{
											this.msg4=""
											this.e2=false
											this.e=false
										}
									})
							if(this.yhm!=""&&this.mm!=""&&this.msg4!="邮箱已存在"&&this.msg!="用户名已存在"&&this.qrmm==this.mm&&this.yzm!=""&&this.yqzt==true){
								this.dlbtzt=true
							}else{
								this.dlbtzt=false
							}
						}
					}
				},
				bs5(){
					this.z=true
					// this.msgcw=""
					// this.msg5=""
				},
				bx5(){
					if(this.yzm==""){
					    this.msg5="请输入邮箱验证码"
						this.z2=true
						this.z=false
						this.msgcw=""
						this.dlbtzt=false
					}else{
						this.z=true
						this.z2=false
						this.msgcw=""
						this.msg5=""
						if(this.yhm!=""&&this.mm!=""&&this.msg4!="邮箱已存在"&&this.msg!="用户名已存在"&&this.qrmm==this.mm&&this.email!=""&&this.yqzt==true){
							this.dlbtzt=false
							this.dlbtzt=true
						}else{
						}
					}
				},
				yq(){
					this.yqzt=!this.yqzt
					if(this.yhm!=""&&this.mm!=""&&this.msg4!="邮箱已存在"&&this.msg!="用户名已存在"&&this.qrmm==this.mm&&this.email!=""&&this.yzm!=""&&this.yqzt==true){
						this.dlbtzt=true
					}else{
						this.dlbtzt=false
					}
				},
				Reg(){
					if(this.yhm!=""&&this.mm!=""&&this.msg4!="邮箱已存在"&&this.qrmm==this.mm&&this.email!=""&&this.msg!="用户名已存在"&&this.yzm!=""&&this.yqzt==true){
						this.list="";
						let data={userName:this.yhm,userPwd:this.mm,Email:this.email,yzm:this.yzm};
						axios
								.post('http://localhost:3000/users/Reg',data)
								.then(res=>{
									if(res.data.msg=="验证码错误"){
										this.msgcw="验证码错误"
										this.z2=true
									}else{

										window.location.href="Login.html";
									}
								})
					}else{
						
					}
				}
		    }
		});
			var sy=document.querySelector("#fh");
			sy.onclick=function(){
				javascript:history.back();
			}
		</script>
	</body>
</html>
